/*******************************
        新表格组件
*******************************/
$f-grid-prefix: "f-datagrid";
$f-cell-height: $f-grid-cell-height;

$f-header-cell-height: $f-grid-header-height;

$f-selected-cell-bgcolor: $farris-grid-selected-bg;
$f-selected-cell-border-color: $farris-grid-selected-border;

$f-merged-cell-bgcolor: $farris-grid-merged-bg;

$f-header-hover-bgcolor: $f-aid-03;
// 基数行
$f-row-odd-bgcolor: $farris-grid-bg;
// 偶数行
$f-row-even-bgcolor: $farris-grid-even-bg;
$f-row-hover-bgcolor: $farris-grid-hovered-bg;
$f-row-hover-color: $farris-grid-text;
$f-resize-proxy-border-color: $f-theme-03;
$f-grid-row-size-type-sm: 1.9375rem;
$f-grid-row-size-type-lg: 2.3125rem;
$f-grid-row-size-type-xl: 60px;

.#{$f-grid-prefix} {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: $farris-grid-text;
    background: $farris-grid-bg;

    table {
        table-layout: fixed;
        border-collapse: separate;
    }

    &-unselect {
        user-select: none;
    }

    &-bg {
        background-color: #fff;
    }

    &-full {
        position: relative;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        flex: 1;
        height: 100%;
    }

    &-group {
        &-row {
            span.f-icon {
                background-size: 16px;
                margin-right: 10px;
                background-repeat: no-repeat;
                cursor: pointer;
            }

            .f-datagrid-group-expanded {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.072 8l-4.357 4.357.618.619L11 8.309v-.618L6.333 3.024l-.618.619L10.072 8z' fill='%23252526'/%3E%3C/svg%3E");
            }

            .f-datagrid-group-collapsed {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z' fill='%23252526'/%3E%3C/svg%3E");
            }

            .f-datagrid-group-action {
                text-align: center;
            }
        }

        &-footer {
            background-color: #fbfbfb;

            .f-datagrid-cell-checkbox {
                background-color: #fbfbfb;
            }
        }
    }

    &-header {
        z-index: 2;
        position: relative;
        width: 100%;
        height: $f-header-cell-height;
        color: $farris-grid-header-text;
        font-weight: $farris-grid-header-font-weight;
        background-color: $farris-grid-header-bg;
        overflow: hidden;
        border-bottom: 1px solid $farris-grid-header-border;
        transition: all 0.15s ease;

        table {
            width: 100%;
        }

        .f-datagrid-cell-group-left-shadow,
        .f-datagrid-cell-group-right-shadow {
            height: $f-header-cell-height;
        }

        &-row {
            background-color: $farris-grid-header-bg;

            .f-datagrid-header-cell:first-child .f-datagrid-header-cell-content::after {
                display: none;
            }
        }

        &-checkbox {
            background-color: $farris-grid-header-bg;
        }

        &-cell.f-datagrid-cell-rownumber {
            background-color: $farris-grid-header-bg;
        }

        &-cell {
            height: $f-header-cell-height;
            overflow: hidden;
            white-space: normal;

            &-content {
                position: relative;
                padding: $farris-grid-header-padding-y $farris-grid-header-padding-x;
                white-space: nowrap;
                line-height: 1.25rem;

                &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 50%;
                    margin-top: calc(-#{$f-grid-header-cell-line-height} / 2);
                    display: block;
                    height: $f-grid-header-cell-line-height;
                    width: 1px;
                    background-color: $farris-grid-header-splitter-color;
                }
            }

            &-title {
                overflow: hidden;
                display: inline-block;
                color: $f-text-02;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: middle;
                line-height: 18px;
            }

            &:first-child &-content::after {
                display: none !important;
            }

            &:hover {
                background: $farris-grid-header-hover-bg;

                &-content {
                    &::after {
                        display: none;
                    }
                }

                .f-datagrid-sort {
                    background: $farris-grid-header-hover-bg;
                }
            }

            &-resize {
                background-clip: padding-box;
                position: relative;

                .column-resize-bar {
                    display: block;
                    position: absolute !important;
                    top: 0;
                    right: 0;
                    margin: 0;
                    width: 5px;
                    height: 100%;
                    padding: 0;
                    cursor: e-resize;
                    border: 1px solid transparent;
                }

                &:hover {
                    .column-resize-bar {
                        border-right: 3px solid $f-table-column-resize-bar-hover-color;
                        border-top: none;
                    }
                }
            }

            &.f-datagrid-header-cell-sort {
                &:hover {
                    .f-datagrid-sort {
                        display: inline-block;
                    }
                }

                &[align="right"] {
                    .f-datagrid-header-cell-content {
                        padding-right: 30px;
                    }
                }

                .f-datagrid-sort-asc,
                .f-datagrid-sort-desc {
                    display: inline-block;
                }
            }

            &.column-resizeing {
                background-color: $f-header-hover-bgcolor;
            }

            &-group {
                border-bottom: 1px solid $farris-grid-border !important;
            }

            .f-datagrid-sort {
                @include f-table-sort;
                vertical-align: middle;
                display: none;
            }
        }

        .header-wrap .f-datagrid-header-cell-title {
            white-space: pre-wrap;
        }

        &-fixed-left,
        &-fixed-right {
            position: absolute;
            z-index: 4;
        }

        &-fixed-left {
            box-shadow: $farris-grid-fixed-left-default-shaow;
        }

        &-fixed-right {
            box-shadow: $farris-grid-fixed-right-default-shaow;

            .f-datagrid-header-cell:first-child .f-datagrid-header-cell-content::after {
                display: inline-block;
            }
        }

        //表头增加左侧竖线
        &-center {
            &-cell:first-child {
                &-content::after {
                    display: inline-block;
                }
            }
        }
    }

    &-body {
        position: absolute;
        overflow: hidden;
        z-index: 0;
        left: 0;
        background: #fff;

        &-wheel-area {
            overflow: hidden;
            position: relative;
        }

        &-fixed-left {
            position: absolute;
            z-index: 1;
            background: $farris-grid-bg;
            box-shadow: $farris-grid-fixed-left-default-shaow;
        }

        &-fixed-right {
            position: absolute;
            width: 200px;
            background: $farris-grid-bg;
            z-index: 999;
            overflow: hidden;
            box-shadow: $farris-grid-fixed-right-default-shaow;
        }

        &-row {
            overflow: hidden;
            height: $f-cell-height;
            width: 100%;
            top: 0;
            transition: all 0.15s ease;
        }
    }

    &-table {

        .f-datagrid-disable-row {
            color: rgba(0, 0, 0, 0.3);
        }
    }

    &-rowhover {
        .f-datagrid-body-fixed-left tr:not(.f-datagrid-row-selected):not(.f-datagrid-group-row):not(.f-datagrid-group-footer):not(.f-datagrid-disable-row):hover {
            cursor: pointer;
            background: $f-row-hover-bgcolor;
            color: $f-row-hover-color;
            transition: background-color 0.1s ease-in;

            .f-datagrid-cell {
                background-color: transparent;
            }
        }

        .f-datagrid-table tr:not(.f-datagrid-row-selected):not(.f-datagrid-group-row):not(.f-datagrid-group-footer):not(.f-datagrid-disable-row):hover,
        .f-datagrid-body-fixed-right tr:not(.f-datagrid-row-selected):hover {
            cursor: pointer;
            background: $f-row-hover-bgcolor;
            color: $f-row-hover-color;
            transition: background-color 0.1s ease-in;

            .f-datagrid-cell {
                background-color: transparent;
            }
        }
    }

    &-row {
        overflow: hidden;
        height: $f-cell-height;
        width: 100%;
        top: 0;
        border-bottom: 1px solid $farris-grid-border;
        background-color: $farris-grid-bg;
        transition: all 0.15s ease;

        &-body {

            .f-datagrid-cell-group-left-shadow,
            .f-datagrid-cell-group-right-shadow {
                height: $f-cell-height;
            }
        }

        &-hover {
            cursor: pointer;
            color: $farris-grid-hovered-text;
            background: $farris-grid-hovered-bg;
            border-color: $farris-grid-hovered-border;

        }

        &-selected {
            color: $farris-grid-selected-text;
            background-color: $farris-grid-selected-bg;
            border-color: $farris-grid-selected-border;

            .f-datagrid-cell {
                border-bottom-color: $farris-grid-selected-border;
            }
        }
    }

    &-virtual-row {
        overflow: hidden;
        pointer-events: none;
        background-color: transparent !important;
        border-width: 0;
        width: 1px;
    }

    &-cell {
        height: $f-cell-height;
        border-style: solid;
        border-width: 0 0 1px;
        border-color: $farris-grid-border;
        overflow: hidden;
        white-space: normal;
        background-color: transparent;

        &-formgroup {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            datagrid-tooltip {
                height: 100%;
                width: 100%;
                align-items: center;
                justify-content: center;
                display: flex;
            }

            textarea.ng-invalid {
                border: 1px solid red;
            }
        }

        &-editor {
            width: 100%;
            height: calc(#{$f-cell-height} - 3px);
            border: 0;
        }

        &-selected {
            background-color: $f-selected-cell-bgcolor !important;
        }

        &-edit {
            .f-datagrid-cell-content {
                padding: 0;
            }
        }

        //合并单元格
        &.#{$f-grid-prefix}-td-merged {
            background-color: $f-merged-cell-bgcolor !important;
        }

        &-content {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            margin: 0;
            height: calc(#{$f-cell-height} - 3px);
            line-height: calc(#{$f-cell-height} - 3px);
            padding: 0 $farris-grid-header-padding-x;

        }

        &-rownumber {
            text-align: center;

            .f-datagrid-cell-content {
                padding: 0;
                text-align: center;
            }

        }

        &-checkbox {
            text-align: center;
        }
    }

    &-pager {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: $farris-grid-pager-height;
        z-index: 100;

        .pagination {
            margin: 0;
            padding: $farris-grid-pager-inner-gutter;
            align-items: center;

            .pagination-pagelist {

                .pagerlist-first-text,
                .pagerlist-last-text {
                    margin: 0 0.375rem;
                    display: inline-block;
                }

                padding: 0;
            }

            .pagination-message {
                padding: 0 1.1875rem 0 0;
            }
        }
    }

    &-norecords {
        width: 100%;
        position: relative;

        &-content {
            height: 120px;
            padding: 80px 0 0;
            text-align: center;
            color: rgba(0, 0, 0, 0.25);
            background: url(imgs/table-norecords.png) top center no-repeat;
            position: absolute;
            top: 50%;
            margin: -60px 0 0;
            line-height: 40px;
            font-size: 1rem;
        }
    }

    .ps--active-x>.ps__rail-x,
    .ps--active-y>.ps__rail-y {
        z-index: 999;
    }

    .ps.ps--active-y>.ps__rail-y {
        left: auto !important;
        width: 8px;
        cursor: default;
        transition: width 200ms linear, opacity 200ms linear,
            background-color 200ms linear;
    }

    .ps.ps--active-x>.ps__rail-x {
        top: auto !important;
        height: 8px;
        cursor: default;
        transition: height 200ms linear, opacity 200ms linear,
            background-color 200ms linear;
    }

    &-body-fixed-left {

        >.ps__rail-x,
        >.ps__rail-y {
            display: none !important;
        }
    }

    // 阴影
    &-fixed-right-shadow {
        box-shadow: $f-grid-fixed-right-scroll-shadow;
    }

    &-fixed-left-shadow {
        box-shadow: $f-grid-fixed-left-scroll-shadow;
    }

    //增加设置样式
    &-settings {
        height: 100%;

        &-icon {
            position: absolute;
            right: 0;
            z-index: 8;
            top: 0;
            height: 30px;
            display: flex;
            align-items: center;
            width: 30px;
            cursor: pointer;
            justify-content: center;
            background: rgb(250, 250, 250);

            &:hover {
                color: #388fff;
                background-color: #e6e6e6;
            }
        }

        .header {
            cursor: move;
            border-bottom: 1px solid #d9d9d9;
            padding: 5px 10px 0px 10px;

            .title {
                font-size: 16px;
                font-weight: bold;
            }

            .close {
                text-align: right;
                position: relative;
                z-index: 55555;
            }

            .navitem {
                cursor: pointer;
                font-size: 14px;

                &.active {
                    color: #388fff;
                    border-bottom: 2px solid #388fff;
                }
            }
        }

        .sort-label {
            position: absolute;
            left: 10px;
            margin-top: 3px;
        }

        .sort-btns {
            visibility: hidden;
            float: right;
            font-size: 12px;

            &.selected {
                visibility: visible;
            }
        }

        .f-multi-select .f-multi-select-list .f-multi-select-list-group-item {
            padding-right: 5px;
        }

        .f-multi-select-list-group-item:hover {
            background: #f8f9fa;

            .sort-btns {
                visibility: visible;
            }
        }

        .f-multi-select-list-group-item {
            cursor: pointer;
            position: relative;

            .sort-btns {
                visibility: hidden;
            }

            .f-checkradio-single {
                top: 6px;
                left: 8px;
            }
        }
    }

    //标识可编辑单元格
    &.highlight-allowedit-cell {
        .cell-empty {
            color: #BCC5D3
        }

        ;

        td {
            &.allow-edit-cell {
                position: relative;
                padding-right: 6px;

                &::before {
                    font-family: FarrisIcons;
                    position: absolute;
                    right: 4px;
                    top: 50%;
                    margin-top: -10px;
                }

                &.f-datagrid-cell-editing {
                    padding-right: 0;

                    &::before {
                        content: "";
                    }
                }
            }

            &.allow-edit-cell-left {
                position: relative;
                padding-right: 6px;

                &::before {
                    font-family: FarrisIcons;
                    position: absolute;
                    right: 2px;
                    top: 50%;
                    margin-top: -10px;
                }

                &.f-datagrid-cell-editing {
                    padding-left: 0;
                    padding-right: 0;

                    &::before {
                        content: "";
                    }
                }
            }

            &.cell-textbox {
                &::before {
                    content: "\eb46";
                }
            }

            &.cell-textarea {
                &::before {
                    content: "\eb46";
                }
            }

            &.cell-lookup {
                &::before {
                    content: "\e032";
                }
            }

            &.cell-datepicker {
                &::before {
                    content: "\e108";
                }
            }

            &.cell-timepicker {
                &::before {
                    font-family: FarrisExtend;
                    content: "\e107";
                }
            }

            &.cell-combolist {
                &::before {
                    content: "\e015";
                }
            }

            &.cell-cell-combo-lookup {
                &::before {
                    content: "\e015";
                }
            }

            &.cell-input-group {
                &::before {
                    content: "\eb46";
                }
            }

            &.cell-numberbox {
                &::before {
                    content: "\eb46";
                }
            }

            &.cell-checkbox {
                &::before {
                    content: "\eb46";
                }
            }

            &.cell-language-textbox {
                &::before {
                    content: "\eb46";
                }
            }
        }
    }

    &.highlight-allowedit-cell tr.f-datagrid-disable-row td.allow-edit-cell,
    &.highlight-allowedit-cell tr.f-datagrid-disable-row td.allow-edit-cell-left {
        padding-left: 0;
        padding-right: 0;
    }

    &.highlight-allowedit-cell tr.f-datagrid-disable-row td.allow-edit-cell::before,
    &.highlight-allowedit-cell tr.f-datagrid-disable-row td.allow-edit-cell-left::before {
        content: "";
    }

    &.highlight-allowedit-cell td.cell-readonly.allow-edit-cell,
    &.highlight-allowedit-cell td.cell-readonly.allow-edit-cell-left {
        padding-left: 0;
        padding-right: 0;
    }

    &.highlight-allowedit-cell td.cell-readonly.allow-edit-cell::before,
    &.highlight-allowedit-cell td.cell-readonly.allow-edit-cell-left::before {
        content: "";
    }
}

.#{$f-grid-prefix} {

    &-full {
        position: relative;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        flex: 1;
        height: 100%;
    }

    /*******************************
        新表格组件——带斑马线
*******************************/
    &-strip {
        .f-datagrid-body {
            .f-datagrid-row-selected {
                color: $farris-grid-selected-text !important;
                border-color: $farris-grid-selected-border;
                background-color: $farris-grid-selected-bg !important;

                .f-datagrid-cell {
                    border-bottom-color: $farris-grid-selected-border;
                }
            }

            tr:nth-child(odd) {
                background-color: $f-row-odd-bgcolor;
            }

            tr:nth-child(even) {
                background-color: $f-row-even-bgcolor;
            }

        }
    }

    /*******************************
          新表格组件——带边线
  *******************************/
    &-bordered {
        border: 1px solid $farris-grid-border;

        .f-datagrid-cell {
            border-width: 0 1px 1px 0;
        }

        .f-datagrid-body-fixed-right {
            border-left: 1px solid $farris-grid-border;
        }

        .f-datagrid-header {
            &-cell {
                border: 1px solid $farris-grid-border;
                border-width: 0 1px 0 0;

                &-content::after {
                    display: none;
                }
            }

            &-fixed-right {
                border-left: 1px solid $farris-grid-border;
            }

            &-fixed-left {
                tr td:last-child {
                    border-right: 1px solid $farris-grid-border;
                }
            }
        }

        .f-datagrid-pager .pagination-container {
            padding: 0 0.5rem;
        }
    }

    /**
    * 拖动列宽
    */
    &-resize-proxy {
        width: 1px;
        border-left: 1px dashed $f-resize-proxy-border-color;
        left: 0px;
        display: none;
        position: absolute;
        height: 100%;
        z-index: 99;
    }

    &-resize-bg {
        z-index: 98;
        width: 100%;
        height: 100%;
        cursor: e-resize;
        background: transparent;
        position: absolute;
        display: none;
    }


    /** 折行 */
    &-wrap &-cell-content {
        white-space: normal;
        word-break: break-all;
        word-spacing: normal;
        height: auto;
        line-height: 24px;
    }

    &-footer {
        background: #fff;
        z-index: 97;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;

        table {
            table-layout: fixed;
        }
    }

    &-sm {

        .f-datagrid-body-row,
        .f-datagrid-cell {
            height: $f-grid-row-size-type-sm;
        }

        .f-datagrid-cell-content {
            height: $f-grid-row-size-type-sm - 0.0625rem;
            line-height: $f-grid-row-size-type-sm - 0.0625rem;
        }

    }

    &-lg {

        .f-datagrid-body-row,
        .f-datagrid-cell {
            height: $f-grid-row-size-type-lg;
        }

        .f-datagrid-cell-content {
            height: calc(#{$f-grid-row-size-type-lg} - 3px);
            line-height: calc(#{$f-grid-row-size-type-lg} - 3px);
        }

    }

    &-xl {

        .f-datagrid-body-row,
        .f-datagrid-cell {
            height: $f-grid-row-size-type-xl;
        }

        .f-datagrid-cell-content {
            height: calc(#{$f-grid-row-size-type-xl} - 3px);
            line-height: calc(#{$f-grid-row-size-type-xl} - 3px);
        }

    }

    //新增折行表格样式
    &.f-datagrid-wrap {

        &.f-datagrid-sm,
        &.f-datagrid-lg,
        &.f-datagrid-xl {
            .f-datagrid-cell-content {
                height: auto;
            }
        }
    }
}

.f-datagrid-strip .f-datagrid-body tr.f-datagrid-row-hover:nth-child(even),
.f-datagrid-strip .f-datagrid-body tr.f-datagrid-row-hover:nth-child(odd) {
    color: $farris-grid-hovered-text;
    background: $farris-grid-hovered-bg;
}

.f-grid-total-row {
    height: $farris-total-row-height;
    background: $f-aid-07;
    border: 1px solid rgba($f-semantic-warning-01, 0.1);
    padding: 0 1.5rem 0 1.875rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .f-title {
        flex-shrink: 0;
        padding-right: 12px;
        color: $f-semantic-warning-01;
    }

    .f-content {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        text-align: right;
    }

    .f-grid-total-detail {
        float: right;
        display: flex;
        align-items: center;
        color: $f-text-04;

        dt {
            margin: 0 0 0 2rem;
            display: inline-block;
            font-weight: normal;
        }

        dd {
            color: $f-text-01;
            display: inline-block;
            margin: 0 0 0 0.25rem;
            font-size: 1.125rem;
            font-weight: 400;
        }

        .h3 {
            font-size: 1.25rem;
            margin-bottom: 0;
            font-weight: 600;
        }
    }
}

//datagrid新增过滤行样式
.#{$f-grid-prefix}-filter-td {
    vertical-align: middle;
}

.#{$f-grid-prefix}-filter-toolbar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #d9d9d9;
    background: #fdfdfd;
    display: flex;
    flex-direction: row;
    align-items: center;

    .title {
        margin-left: 15px;
        font-weight: bold;
        color: $f-theme-03;
        white-space: nowrap;

        &:hover {
            color: $f-theme-05;
        }

        &:active {
            color: $f-theme-01;
        }
    }

    .filter {
        &-action {
            flex-shrink: 0;
            padding: 0 5px;

            &-item {
                cursor: pointer;
                margin-left: 5px;
            }
        }

        &-clear {
            color: red;
        }

        &-text {
            color: #212529;
            font-size: 12px;
            flex: 0 1 auto;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

            .badge {
                border-radius: 9px;
            }

            .ellipsis {
                cursor: pointer;
            }

            .filter-field {
                padding: 4px;
                border: 1px solid transparent;
                cursor: pointer;

                &:hover {
                    border: 1px dashed rgb(56, 143, 255);
                    background: #f3f9ff;
                }
            }
        }
    }

    &-panel {
        position: absolute;
        top: 32px;
        width: 100%;
        background: #ffffff;
        z-index: 3;
        visibility: hidden;
        border-radius: 3px;

        span.filter-text {
            margin: 15px;
            display: block;
            line-height: 24px;
        }

        .btn-close {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        &.show {
            visibility: visible;
            height: auto;
            right: 28px;
            box-shadow: 0px 2px 5px 1px #ababab;
            padding-left: 3px;

            .filter-text .filter-field {
                display: block;
                border: 1px solid transparent;
                cursor: pointer;
                font-size: 12px;

                &:hover {
                    border: 1px dashed rgb(56, 143, 255);
                    background: #f3f9ff;
                }

                span.badge-success {
                    float: right;
                    margin-top: 3px;
                    margin-left: 2px;
                    margin-right: 3px;
                }
            }
        }
    }
}

// 表格的批量编辑弹出框
.bulkedit-controls-container {
    padding-left: 18px;
    padding-right: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.bulkedit-controls-container .bulkedit-container--table {
    width: 100%;
}

.bulkedit-container--table>tbody>tr>td {
    padding-bottom: 10px;
}

.bulkedit-container--table .bulkedit-container--editor-td {
    padding-right: 7px;
    padding-left: 10px;
}

.bulkedit-container--table .bulkedit-container--readonly-wrapper {
    border-color: #e6e9f0;
}

.bulkedit-container--remove {
    width: 24px;
    display: block;
    cursor: pointer;
    text-align: center;
    color: #ccd1dd;
}

.bulkedit-container--remove .f-icon {
    font-size: 18px;
}

.bulkedit-container--remove:hover {
    color: #f0595a;
}

.f-datagrid-default-show-icon {
    font-size: 13px;
    color: $farris-primary;
}

.grid-cell-nowrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}

.grid-cell-wrap {
    white-space: pre-wrap;
}

.f-datagrid-cell-formgroup .f-checkradio-single {
    margin-bottom: 0;
}

.f-datagrid-enable-highlight {
    .f-datagrid-cell-selected {
        box-shadow: inset 0 0 0 1px $farris-primary;

        &.f-datagrid-cell-editing {
            box-shadow: none;

            .f-datagrid-cell-content {
                padding-left: 4px;
                padding-right: 4px;
            }
        }
    }

    .f-datagrid-row-selected {
        background-color: transparent;
    }
}

// 禁用表格的遮罩
.f-datagrid-disabled {
    top: 0;
    left: 0;
}




.f-datagrid-bordered .f-datagrid-header-cell {
    border: 0;
    box-shadow: -1px 0px 0px #eaedf3;
}


.drag-column-moving {
    background: #E8E9E9;
    cursor: move;
    border-radius: 5px;
    border: 1px solid #8e959b;
}

.drag-column-moving::after {
    width: 0;
}

.smooth-dnd-ghost .drag-column-bar,
.f-datagrid-header .drag-column-bar {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -6px;
    text-align: center;
    cursor: move;
}

.f-datagrid-header .smooth-dnd-draggable-wrapper .f-datagrid-header-cell-title {
    margin-left: 3px;
}

.f-datagrid-header .smooth-dnd-draggable-wrapper .drag-column-bar {
    visibility: hidden;
}

.f-datagrid-header .smooth-dnd-draggable-wrapper:hover .drag-column-bar {
    visibility: visible;
}

.smooth-dnd-drop-preview-constant-class {
    background: #dee1ea;
}

.f-datagrid-header-fixed-left tr.f-datagrid-header-row,
.f-datagrid-header-fixed-right tr.f-datagrid-header-row {
    height: 2.1875rem;
}

.f-datagrid-column-drop-panel {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px solid #d8dce6;
    background: #f8f8f8;

    &::before {
        content: f-attr(placeholder);
        color: rgba(204, 204, 204, 1);
        position: absolute;
        top: 12px;
        font-size: 16px;
        left: 15px;
    }

    .row-group-fields {
        height: 100%;
        width: 100%;

        .group-field .f-icon {
            position: absolute;
            right: 5px;
            top: 6px;
            cursor: pointer;
        }
    }

    .drop-group-field {
        border: 1px dashed #222222;
    }

    .drop-group-field,
    .row-group-fields .group-field {
        background: #E8E9E9;
        max-width: 200px;
        line-height: 24px;
        height: 30px !important;
        border-radius: 24px;
        color: #000000;
        font-size: 14px;
        border: 1px solid #E8E9E9;
        margin-left: 10px;
        display: inline-block !important;
        cursor: grab;
        position: relative;
        padding: 2px 25px 2px 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-top: -15px;
        top: 50%;
    }

    .smooth-dnd-drop-preview-constant-class {
        background-color: transparent;
    }
}


/* 过滤排序 */

.f-datagrid-header-cell .f-datagrid-filter-sort-asc,
.f-datagrid-header-cell .f-datagrid-filter-sort-desc,
.f-datagrid-header-cell:hover .f-datagrid-filter,
.f-datagrid-header-cell .f-datagrid-filter-sort-asc.active,
.f-datagrid-header-cell .f-datagrid-filter-sort-desc.active,
.f-datagrid-header-cell .f-datagrid-filter-sort.active,
.f-datagrid-header-cell .f-datagrid-filter.active {
    display: inline-block;
    color: $f-theme-03;
}

.f-datagrid-header-cell .f-datagrid-filter::before {
    content: "\eb88"
}

.f-datagrid-header-cell .f-datagrid-filter-sort::before {
    content: "\eb89"
}

.f-datagrid-header-cell .f-datagrid-filter-sort-asc::before {
    content: "\eb9a"
}

.f-datagrid-header-cell .f-datagrid-filter-sort-desc::before {
    content: "\eb9b"
}

.f-filter-panel-sort-wrapper {
    padding: 14px 24px 16px;
}

.f-filter-panel-sort-wrapper .f-filter-panel-sort {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    background: #F2F4F8;
    border-radius: 4px;
    height: 30px;
    padding: 2px;
}

.f-filter-panel-sort-wrapper .f-filter-panel-sort .panel-sort-item {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 22px;
    color: #999999;
    font-size: 13px;
    cursor: pointer;
}

.f-filter-panel-sort-wrapper .f-filter-panel-sort .panel-sort-item .panel-sort-item-icon {
    margin-right: 6px;
    font-size: 14px;
}

.f-filter-panel-sort-wrapper .f-filter-panel-sort .panel-sort-item.active {
    color: #333333;
    background-color: #fff;
}

.f-filter-panel-sort-wrapper.f-filter-panel-sort-wrapper-hasfilter {
    padding: 0 0 12px 0;
}

.f-filter-panel .f-filter-panel-inner {
    box-shadow: 0 4px 15px 0 #a7a7a7;
}

.f-datagrid-filter-panel .panel-header {
    color: $f-theme-05 !important;
    border-color: $f-theme-05 !important;
}

.format-setting-searchitem .f-cmp-inputgroup .input-group,
.format-setting-searchitem .f-cmp-inputgroup .input-group input {
    border: 0;
    height: 30px;
}


// 固定显示滚动条
.f-datagrid.scrollbar-allways-show {
    background: #F4F5F9;
}

.scrollbar-allways-show {

    .ps__rail-x,
    .ps__rail-y {
        opacity: 1;
    }

    .ps.ps--active-x>.ps__rail-x,
    .ps.ps--active-y>.ps__rail-y {
        background-color: #F5F6F9;
        opacity: 1;
    }

    .ps.ps--active-y>.ps__rail-y {
        width: 18px !important;
        border-left: 1px solid #Dee4ed;
    }

    .ps.ps--active-x>.ps__rail-x {
        height: 18px !important;
        border-top: 1px solid #Dee4ed;
        margin: 0 18px 0 0;
    }

    .ps__thumb-y {
        width: 10px;
        right: 4px;
    }

    .ps__thumb-x {
        height: 10px;
        bottom: 4px;
    }

    .ps__thumb-x,
    .ps__thumb-y {
        background-color: #D9dee7 !important;
    }

    .ps__rail-y.ps--clicking .ps__thumb-y,
    .ps__rail-y:focus>.ps__thumb-y,
    .ps__rail-y:hover>.ps__thumb-y {
        width: 10px !important;
        background-color: #AEB5C6 !important;
    }

    .ps__rail-x.ps--clicking .ps__thumb-x,
    .ps__rail-x:focus>.ps__thumb-x,
    .ps__rail-x:hover>.ps__thumb-x {
        height: 10px !important;
        background-color: #AEB5C6 !important;
    }
}


.farris-component.farris-component-Table table td .farris-input-wrap .farris-switch-outlayer {
    display: flex;
    height: 100%;
    align-items: center;
  }